<template>
  <div class="mv-details-wrap">
    <div class="mv-details-header">
      {{ name }}
    </div>
    <div class="mv-details-msg">
      <div class="mv-details-arts">
        歌手：<span
          v-for="(artist, index) in artists"
          :key="artist.id"
          @click="goArtist(artist.id)"
          >{{ artist.name
          }}<span v-if="index < artists.length - 1">/</span></span
        >
      </div>
      <div class="mv-details-count">播放：{{ playCount }}次</div>
    </div>
    <div class="mv-details-time">发行时间: {{ publishTime }}</div>
    <div class="mv-details-desc">
      {{ desc }}
    </div>
  </div>
</template>

<script lang="ts">
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
import { Artist } from "@/model/music-info.model";
import { Vue, Component } from "vue-property-decorator";
import Router, { Route } from "vue-router";
@Component({})
export default class MVDetailsComponent extends Vue {
  name = "";
  artistName = "";
  artists: Artist[] = [];
  playCount = 0;
  subCount = 0;
  publishTime = "";
  desc = "";

  $api: APIType;
  $route: Route;
  $router: Router;

  // 动态组件生命周期
  activated() {
    this.$api.getMVDetail(this.$route.params.id).then((res) => {
      // console.log(res.data.data)
      this.name = res.data.name;
      this.artistName = res.data.artistName;
      this.artists = res.data.artists;
      this.playCount = res.data.playCount;
      this.publishTime = res.data.publishTime;
      this.desc = res.data.desc;
    });
  }
  goArtist(id: CommonIdType) {
    // console.log(id)
    this.$router.push({ path: `/artist/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.mv-details-wrap {
  padding: 0 0.1rem;
  color: #333;
  .mv-details-header {
    margin-top: 0.2rem;
    font-size: 0.28rem;
  }
  .mv-details-msg {
    margin-top: 0.1rem;
    display: flex;
    font-size: 0.13rem;
    color: #999;
    .mv-details-arts {
      color: #0c73c2;
      border-right: 1px solid #999;
      width: 50%;
    }
    .mv-details-count {
      padding-left: 0.3rem;
      width: 50%;
    }
  }
  .mv-details-time {
    color: #999;
    font-size: 0.12rem;
    margin-top: 0.1rem;
  }
  .mv-details-desc {
    margin-top: 0.1rem;
    font-size: 0.15rem;
  }
}
</style>
